<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>白居易首页</title>
	<link rel="stylesheet" href="css/首页.css" />
	<link rel="stylesheet" href="css/base.css" />
	<link rel="stylesheet" href="iconfont/font_fangdajin/iconfont.css" />
</head>

<body>
	<div id="trail-container"></div>
	<!-- 快捷导航模块开始 -->
	<div class="shortcut">
		<div class="w">
			<div class="LOGO">
				<img src="./img/d.png" alt="logo" />
			</div>
			<div class="Module_classify">
				<ul>
					<li><a href="./首页.html">首页</a></li>
					<li><a href="./杭州刺史.html">杭州刺史</a></li>
					<li><a href="./杭白政绩.html">杭白政绩</a></li>
					<li><a href="./经典之作.html">经典之作</a></li>
					<li><a href="./登录界面.html">登录</a></li>
				</ul>
			</div>

			<div class="search">
				<input type="search" placeholder="获取帮助" />
				<button><span class="iconfont icon-fangdajing"></span></button>
			</div>
		</div>
	</div>
	<!-- 快捷导航模块结束 -->

	<!-- 背景＋名字模块制作开始 -->
	<div class="bglo">
		<p class="bai">白</p>
		<p class="ju">居</p>
		<p class="yi">易</p>
	</div>
	<!-- 背景＋名字模块制作结束 -->

	<!-- 人物介绍制作开始 -->
	<div class="Chaint w">
		<div class="main_head" id="main_one">
			<h2>人物介绍</h2>
			<p>Bai Juyi's character introduction</p>
		</div>
		<div class="main_body w">
			<div class="leftl_main">
				<img src="img/1.webp" alt="白居易" />
			</div>
			<div class="leftr_main">
				<a href="https://baike.baidu.com/item/%E7%99%BD%E5%B1%85%E6%98%93/174330">个人简介</a>
				<p>白居易（772年－846年），字乐天，号香山居士，又号醉吟先生
					，祖籍太原，到其曾祖父时迁居下邽，
					生于河南新郑。是唐代伟大的现实主义诗人，
					唐代三大诗人之一。白居易与元稹共同倡导新乐府运动，
					世称“元白”，与刘禹锡并称“刘白”。白居易的诗歌题材广泛，
					形式多样，语言平易通俗，有“诗魔”和“诗王”之称。官至翰林学士、
					左赞善大夫。公元846年，白居易在洛阳逝世，葬于香山。有《白氏长庆集》传世，
					代表诗作有《长恨歌》、《卖炭翁》、《琵琶行》等。共著有 2908 篇诗文
				</p>
			</div>
			<div class="bottoml_main">
				<p>江南忆，最忆是杭州。山寺月中寻桂子，郡亭枕上看潮头。何日更重游？</p>
			</div>
			<div class="right_main">
				<a
					href="https://wenku.baidu.com/view/05291c85f405cc1755270722192e453611665b23.html?_wkts_=1719212853859">作品风格</a>
				<p>白居易的闲适诗在后代有很大影响，其浅切平易的语言风格、
					淡泊悠闲的意绪情调，都曾屡屡为人称道，但相比之下，这些诗中所表现的那种退避政治、
					知足保和的"闲适"思想，以及归趋佛老、效法陶渊明的生活态度，因与后世文人的心理较为吻合，
					所以影响更为深远。如白居易有"相争两蜗角，所得一牛毛" （《不如来饮酒七首》其七）、
					"蜗牛角上争何事，石火光中寄此身"（《对酒五首》其二）的诗句，而"后之使蜗角事悉稽之"
					（吴曾《能改斋漫录》卷八）。即以宋人所取名号论，"醉翁、迂叟、东坡之名，皆出于白乐天诗云"
					（龚颐正《芥隐笔记》）。宋人周必大指出："本朝苏文忠公不轻许可，独敬爱乐天，屡形诗篇。
					盖其文章皆主辞达，而忠厚好施，刚直尽言，与人有情，于物无着，大略相似。谪居黄州，始号东坡，
					其原必起于乐天忠州之作也。"（《二老堂诗话》）凡此种种，都展示出白居易及其诗的影响轨迹。
				</p>
			</div>
		</div>


	</div>
	<!-- 人物介绍制作结束 -->

	<!-- 人物生平制作开始 -->
	<div class="shengping w">
		<div class="main_head" id="main_tow">
			<h2>人物生平</h2>
			<p>Bai Juyi's character introduction</p>
		</div>
		<div class="photoheji_one">
			<div class="card">
				<div class="photo">
					<img src="./img/chusheng.jpeg" alt="" />
				</div>
				<h2>出生与早年</h2>
				<h3>772年</h3>
				<p>白居易，字乐天，出生于河南新郑一个官宦家庭。早年因战乱随家人迁往宿州符离，在那里度过了他的童年。</p>
				<a href="#">了解更多</a>
			</div>
			<div class="card">
				<div class="photo">
					<img src="./img/jinshijidi.png" alt="" />
				</div>
				<h2>进士及第</h2>
				<h3>800年</h3>
				<p>29岁时，白居易高中进士，随后进入朝廷，历任秘书省校书郎、盩至尉、翰林学士等职，开始了他的政治生涯。</p>
				<a href="#">了解更多</a>
			</div>
		</div>
		<div class="photoheji_tow">
			<div class="card">
				<div class="photo">
					<img src="./img/bzjwxcz.png" alt="" />
				</div>
				<h2>贬谪与文学创作</h2>
				<h3>815年</h3>
				<p>因直言进谏遭贬为江州司马，期间创作了大量反映民生疾苦的诗歌，如《琵琶行》和《长恨歌》，这两部作品在艺术上取得了巨大成功。</p>
				<a href="#">了解更多</a>
			</div>
			<div class="card">
				<div class="photo">
					<img src="./img/laoniansh.png" alt="" />
				</div>
				<h2>晚年生活</h2>
				<h3>846年</h3>
				<p>白居易晚年官至太子少傅，晚年笃信佛教，号香山居士。在洛阳安度晚年，继续文学创作。846年，白居易在洛阳去世，享年75岁，被追赠尚书右仆射，谥号“文”。</p>
				<a href="#">了解更多</a>
			</div>

		</div>
	</div>
	<!-- 人物生平制作结束 -->

	<!-- 人物成就制作开始 -->
	<div class="chengjiu w">
		<div class="main_head" id="main_three">
			<h2>人物成就</h2>
			<p>Character achievements</p>
		</div>

		<div class="guanchang">
			<h2>官场</h2>
			<div class="chengjiuimg">
				<div class="zhaopian">
					<img src="./img/hanlinxueshi.jpg" alt="" />
				</div>
				<div class="bt">
					<h3>翰林学士</h3>
				</div>
			</div>
			<div class="chengjiuimg">
				<div class="zhaopian">
					<img src="./img/jiangzhousima.jpg" alt="" />
				</div>
				<div class="bt">
					<h3>江州司马</h3>
				</div>
			</div>
			<div class="chengjiuimg">
				<div class="zhaopian">
					<img src="./img/hangzhoucishi.jpg" alt="" />
				</div>
				<div class="bt">
					<h3>杭州刺史</h3>
				</div>
			</div>
		</div>

		<div class="wenxue">
			<h2>文学</h2>
			<div class="chengjiuimg">
				<div class="zhaopian">
					<img src="./img/yuyuanjiushu.jpg" alt="《与元九书》" />
				</div>
				<div class="bt">
					<h3>《与元九书》</h3>
				</div>
			</div>
			<div class="chengjiuimg">
				<div class="zhaopian">
					<img src="./img/shouyechg.jpg" alt="《长恨歌》" />
				</div>
				<div class="bt">
					<h3>《长恨歌》</h3>
				</div>
			</div>
			<div class="chengjiuimg">
				<div class="zhaopian">
					<img src="./img/shouyeppx.jpg" alt="" />
				</div>
				<div class="bt">
					<h3>《琵琶行》</h3>
				</div>
			</div>
		</div>
	</div>
	<!-- 人物成就制作结束 -->

	<!-- 跳转楼层制作开始 -->
	<div class="fix">
		<ul>
			<li><a href="#main_one">人物介绍</a></li>
			<li><a href="#main_tow">人物生平</a></li>
			<li><a href="#main_three">人物成就</a></li>
		</ul>
	</div>
	<!-- 跳转楼层制作结束 -->

	<!-- 结束部分footer制作开始 -->
	<footer>
		<h1>杭州相关名人和古诗</h1>
		<P>请联系我们<a href="19857979455 ">19857979455</a> | 邮箱地址：<a href="3086547255@qq.com">3086547255@qq.com</a></P>
		<h3>版权所有&copy
			浙金院官网
			人工231王家侃
			学号2023630113
		</h3>
	</footer>
	<!-- 结束部分footer制作结束 -->
	<script>
		// 鼠标拖尾效果
		document.addEventListener('DOMContentLoaded', () => {
			const trailContainer = document.getElementById('trail-container');
			const particles = [];
			let lastParticleTime = 0; // 用于记录上次生成粒子的时间

			document.addEventListener('mousemove', (e) => {
				const now = Date.now();
				if (now - lastParticleTime > 50) { // 控制生成频率
					createParticle(e.clientX, e.clientY);
					lastParticleTime = now;
				}
			});

			function createParticle(x, y) {
				const particle = document.createElement('img');
				particle.src = './img/shuimotexiao(dan).png'; // 使用透明背景图片
				particle.classList.add('particle');
				particle.style.left = `${x - 5}px`;
				particle.style.top = `${y - 5}px`;
				trailContainer.appendChild(particle);
				particles.push(particle);

				setTimeout(() => {
					particle.classList.add('fade');
					particle.addEventListener('animationend', () => {
						particle.remove();
						particles.splice(particles.indexOf(particle), 1);
					});
				}, 100); // 迅速开始淡出
			}

			setInterval(() => {
				particles.forEach((particle) => {
					if (particle.classList.contains('fade')) {
						particle.remove();
						particles.splice(particles.indexOf(particle), 1);
					}
				});
			}, 1000);

		});
	</script>
</body>

</html>